<template>
  <div>
    <div class="box">
      <input
        type="text"
        @focus="showHandler"
        @blur="hideHandler"
        v-model="val"
      />
      <button>百度</button>
    </div>
    <ul v-show="showLi" class="list">
      <li
        v-for="(item, index) in keyWor"
        @mouseover="selectHandler(index)"
        @mousedown="clkHandler(index)"
        :class="{ active: tabIndex == index }"
        :key="index"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>
<style lang="css">
input {
  float: left;
  outline: none;
}
button {
  float: right;
  color: white;
}
input {
  width: 200px;
  height: 35px;
  border: none;
}
button {
  width: 55px;
  height: 35px;
  border: none;
  background-color: rgba(39, 39, 231, 0.842);
}
.box {
  width: 260px;
  margin: 0 auto;
  border: 1px solid black;
  overflow: hidden;
}
.list {
  width: 260px;
  margin: 0 auto;
}
.active {
  background-color: darkgray;
}
</style>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    addEventListener("keydown", (e) => {
      //  通过 上下健控制 切换样式 和输入框的内容
      if (e.key == "ArrowDown") {
        if (this.tabIndex == this.keyWord.length - 1) {
          this.tabIndex = 0;
        } else {
          this.tabIndex++;
        }
        this.val = this.keyWord[this.tabIndex];
      }
      if (e.key == "ArrowUp") {
        if (this.tabIndex == 0) {
          this.tabIndex = this.keyWord.length - 1;
        } else {
          this.tabIndex--;
        }
        this.val = this.keyWord[this.tabIndex];
      }
      if (e.key == "Enter") {
        this.showLi = false;
      }
    });
  },
  methods: {
    showHandler() {
      this.$emit("sendMessage");
    },
    selectHandler() {
      this.$emit("selectHandler");
    },
  },
};
</script>
